<template>
  <div id="bishu">
      <!-- <div class="bgImg" v-bind:style="{backgroundImage:'url(' + activeItem.imgUrl + ')'}"> -->
      <div class="bgImg">
        <img class="bgImage" :src="activeItem.imgUrl"/>
        <div class="con">
          <div class="title1" v-if="activeIndex == 0">
            <div class="name">{{textName}}</div>
            <div class="desc">打开了</div>
            <div class="big">自来水</div>
          </div>
          <div class="title2" v-if="activeIndex == 1">
              <div class="name">{{textName}},</div>
              <!-- <div class="desc">打开了</div> -->
          </div>
          <div class="title3" v-if="activeIndex == 2">
              <div class="name">{{textName}}</div>
              <div class="desc">闻到了手臂上散发的</div>
          </div>
          <div class="title4" v-if="activeIndex == 3">
              <div class="desc">说,</div>
              <div class="name">{{textName}}</div>
              <div class="desc">超市老板对</div>
          </div>
          <div class="title5" v-if="activeIndex == 4">
              <div class="name">{{textName}}</div>
              <div class="desc">今天才知道，</div>
          </div>
          <div class="title6" v-if="activeIndex == 5">
              <div class="desc">买了点凉菜</div>
              <div class="name">{{textName}}</div>
          </div>
          <div class="title7" v-if="activeIndex == 6">
              <div class="name">{{textName}}</div>
              <div class="desc">的偶像不再是周杰伦</div>
          </div>
          <div class="title8" v-if="activeIndex == 7">
              <div class="desc">半夜又被热醒了，</div>
              <div class="name">{{textName}}</div>
          </div>
          <div class="title9" v-if="activeIndex == 8">
              <div class="desc">花了1个小时</div>
              <div class="name">{{textName}}</div>
          </div>
          <div class="title10" v-if="activeIndex == 9">
              <div class="desc">有人问</div>
              <div class="name">{{textName}},</div>
          </div>
          <div class="btns">
              <div @click="shareBtnClick" class="btn_share"></div>
              <div @click="bishuBtnClick" class="btn_bishu"></div>
          </div>
        </div>
      </div>
      <div id="guide" @click="isShow = false" v-if="isShow">
        <div class="icon_up animated bounceIn" @click="isShow = false"></div>
      </div>
  </div>
</template>

<script>
// 分享 指导
// import Guide from '@/components/common/guide2.vue'
// import Share from '@/components/common/share.vue'
export default {
  name: 'bishu',
  data () {
    return {
        isShow: false,
        tel: '',
    	pages: [
             {
                index: 0,
                imgUrl: require('../../assets/images/page001.jpg'),
            },
            {
                index: 1,
                imgUrl: require('../../assets/images/page002.jpg'),
            },
            {
                index: 2,
                imgUrl: require('../../assets/images/page003.jpg'),
            },
            {
                index: 3,
                imgUrl: require('../../assets/images/page004.jpg'),
            },
            {
                index: 4,
                imgUrl: require('../../assets/images/page005.jpg'),
            },
            {
                index: 5,
                imgUrl: require('../../assets/images/page101.jpg'),
            },
            {
                index: 6,
                imgUrl: require('../../assets/images/page102.jpg'),
            },
            {
                index: 7,
                imgUrl: require('../../assets/images/page103.jpg'),
            },
            {
                index: 8,
                imgUrl: require('../../assets/images/page104.jpg'),
            },
            {
                index: 9,
                imgUrl: require('../../assets/images/page105.jpg'),
            }
        ],
        activeIndex: 0,
        activeItem: {},
        textName: '小微',
        isMan: 1,
        isShowShare: false
    }
  },
  components: {
    // Guide,
    // Share
  },
  mounted() {},
  activated(){
      this.wx_config();
      this.textName = localStorage.getItem('textName') || '秒台车';
      this.isMan = localStorage.getItem('isMan') || 1;
      if (this.isMan == 1) {
        this.activeIndex = this.$utils.randomNum(0,4);
      } else {
        this.activeIndex = this.$utils.randomNum(5,9);
      }
      this.activeItem = this.pages[this.activeIndex];
      this.$utils.shareImage = this.activeItem.imgUrl;
  },
  methods: {
     // 分享按钮点击事件
     shareBtnClick: function(){
         this.isShow = true;
     },
     // 避暑按钮点击事件
     bishuBtnClick: function(){
        // this.isShow = true;
        this.$router.push('/cars')
     },
     // 微信配置
    wx_config: function(){
      var self = this;
      var pageUrl = self.$utils.getBaseUrl();
      self.$axios.get('wx_config',{
        params: {
          pageUrl: pageUrl
        }
      }).then(function (res){
      	 var data = res.data;
        wx.config({
          debug: false,
          appId: data.appId,
          timestamp: data.timestamp,
          nonceStr: data.nonceStr,
          signature: data.signature,
          jsApiList: ['onMenuShareTimeline','onMenuShareAppMessage']
        });
        wx.ready(function(){
          console.log('ready')
          // 微信好友分享
          wx.onMenuShareAppMessage(self.$utils.shareData);
          // 朋友圈分享
          wx.onMenuShareTimeline(self.$utils.shareData);
          wx.error(function(res){
    		    console.log('失败');
          });
        });
      }).catch(function (error) {

      });
  	},
  },
}
</script>
<style scoped lang="less">
.bgImage {
  position: fixed;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  width: 100%;
  height: 100%;
  z-index: 1;
}
.con{
  z-index: 100;
  width: 100%;
  height: 100%;
  overflow: hidden;
  div{
    position: relative;
    z-index: 100;
  }
}

#guide{
    width: 100%;
    height: 100%;
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    background-color: rgba(0, 0, 0, 0.3);
    z-index: 200;
}
.icon_up{
    width: 165px;
    height: 138px;
    z-index: 1000;
    background-image: url(../../assets/images/icon_zhixiang.png);
    background-position: center center;
    background-repeat: no-repeat;
    background-size: 165px 138px;
    position: absolute;
    top: 20px;
    right: 20px;
}
.animated{
    animation-iteration-count: 1000;
}

.bishu{
    width: 100%;
    height: 100%;
}
.bgImg {
    position: absolute;
    width: 100%;
    height: 100%;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    // background-image: url(../../assets/images/page01.jpg);
    background-repeat: no-repeat;
    background-size: 100% 100%;
    background-position: center center;
}
.title1 {
  margin-left: 50px;
	font-family: SourceHanSansCN-Medium;
	letter-spacing: 0px;
    color: #000000;
    margin-top: 30px;
    z-index: 100;
    div{
        margin: 0;
        padding: 0;
        float: left;
    }
    .name{
        font-family: SourceHanSansCN-Bold;
        font-size: 60px;
        line-height: 130px;
        font-weight: bold;
        color: #385554;
    }
    .desc{
        font-family: SourceHanSansCN-Bold;
        font-size: 60px;
        line-height: 140px;
        letter-spacing: 0px;
        font-weight: normal;
        color: #000000;
    }
    .big{
        font-family: SourceHanSansCN-Bold;
        font-size: 75px;
        letter-spacing: 0px;
        font-weight: bold;
        color: #000000;
    }
}
.title2 {
    margin-left: 41px;
	height: 86px;
	font-family: SourceHanSansCN-Medium;
	font-size: 60px;
	line-height: 83px;
	letter-spacing: 0px;
    color: #000000;
    margin-top: 40px;
    z-index: 100;
    div{
        margin: 0;
        padding: 0;
        float: left;
    }
    .name{
        font-family: SourceHanSansCN-Medium;
        font-size: 52px;
        line-height: 72px;
        letter-spacing: 0px;
        font-weight: bold;
        color: #8d6054;
    }
    .desc{
        font-family: SourceHanSansCN-Bold;
        font-size: 60px;
        line-height: 83px;
        letter-spacing: 0px;
        font-weight: normal;
        color: #000000;
    }
}
.title3 {
    margin-left: 58px;
	height: 86px;
	font-family: SourceHanSansCN-Medium;
	letter-spacing: 0px;
    color: #000000;
    margin-top: 35px;
    z-index: 100;
    div{
        margin: 0;
        padding: 0;
        float: left;
    }
    .name{
        font-family: SourceHanSansCN-Medium;
        font-size: 48px;
        letter-spacing: 0px;
        font-weight: bold;
        color: #42261b;
    }
    .desc{
        font-family: SourceHanSansCN-Regular;
        font-size: 40px;
        line-height: 78px;
        letter-spacing: 0px;
        font-weight: normal;
        color: #0b0b0b;
    }
}
.title4 {
    margin-right: 46px;
	height: 86px;
	font-family: SourceHanSansCN-Medium;
	letter-spacing: 0px;
    color: #000000;
    margin-top: 40px;
    z-index: 100;
    div{
        margin: 0;
        padding: 0;
        float: right;
    }
    .name{
        font-family: SourceHanSansCN-Medium;
        font-size: 48px;
        letter-spacing: 0px;
        font-weight: bold;
        color: #2f424e;
    }
    .desc{
        font-family: SourceHanSansCN-Light;
        font-size: 40px;
        line-height: 76px;
        letter-spacing: 0px;
        font-weight: normal;
        color: #2f424e;
    }
}
.title5 {
    margin-left: 46px;
    color: #000000;
    margin-top: 30px;
    z-index: 100;
    div{
        margin: 0;
        padding: 0;
        float: left;
    }
    .name{
        font-family: SourceHanSansCN-Medium;
        font-size: 60px;
        letter-spacing: 0px;
        font-weight: bold;
        color: #714e3e;
    }
    .desc{
        font-family: SourceHanSansCN-Light;
        font-size: 48px;
        line-height: 96px;
        letter-spacing: 0px;
        font-weight: 300;
        color: #0b0b0b;
    }
}
.title6 {
    margin-right: 40px;
    color: #000000;
    margin-top: 10px;
    z-index: 100;
    div{
        margin: 0;
        padding: 0;
        float: right;
    }
    .name{
        font-family: SourceHanSansCN-Medium;
        font-size: 60px;
        letter-spacing: 0px;
        font-weight: bold;
        color: #6f4b0b;
    }
    .desc{
        font-family: SourceHanSansCN-Light;
        font-size: 48px;
        line-height: 72px;
        letter-spacing: 0px;
        font-weight: 200;
        color: #000000;
        line-height: 96px;
    }
}
.title7 {
    margin-left: 26px;
    color: #000000;
    margin-top: 26px;
    z-index: 100;
    div{
        margin: 0;
        padding: 0;
        float: left;
    }
    .name{
        font-family: SourceHanSansCN-Medium;
        font-size: 44px;
        letter-spacing: 0px;
        font-weight: bold;
        color: #30484b;
    }
    .desc{
        font-family: SourceHanSansCN-Light;
        font-size: 40px;
        letter-spacing: 0px;
        font-weight: 300;
        color: #0b0b0b;
        line-height: 70px;
    }
}
.title8 {
    margin-right: 20px;
    color: #000000;
    margin-top: 26px;
    z-index: 100;
    div{
        margin: 0;
        padding: 0;
        float: right;
    }
    .name{
        font-family: SourceHanSansCN-Medium;
        font-size: 44px;
        letter-spacing: 0px;
        font-weight: bold;
        color: #413759;
    }
    .desc{
        font-family: SourceHanSansCN-Light;
        font-size: 40px;
        letter-spacing: 0px;
        font-weight: normal;
        color: #0b0b0b;
        line-height: 70px;
    }
}
.title9 {
    margin-right: 20px;
    color: #000000;
    margin-top: 80px;
    z-index: 100;
    div{
        margin: 0;
        padding: 0;
        float: right;
    }
    .name{
        font-family: SourceHanSansCN-Medium;
        font-size: 48px;
        letter-spacing: 0px;
        font-weight: bold;
        color: #da5c3e;
    }
    .desc{
        font-family: SourceHanSansCN-Light;
        font-size: 40px;
        letter-spacing: 0px;
        font-weight: 200;
        color: #0b0b0b;
        line-height: 70px;
    }
}
.title10 {
    margin-left: 44px;
    color: #000000;
    margin-top: 30px;
    z-index: 100;
    div{
        margin: 0;
        padding: 0;
        float: left;
    }
    .name{
        font-family: SourceHanSansCN-Medium;
        font-size: 48px;
        letter-spacing: 0px;
        font-weight: bold;
        color: #505f49;
    }
    .desc{
        font-family: SourceHanSansCN-Normal;
        font-size: 40px;
        letter-spacing: 0px;
        font-weight: 200;
        color: #333333;
        line-height: 70px;
    }
}
.btns {
    position: absolute !important;
    left: 0;
    right: 0;
    height: 80px;
    bottom: 50px;
    text-align: center;
    div{
        background-repeat: no-repeat;
        background-size: 294px 80px;
        background-position: center center;
    }
    .btn_share {
        display: inline-table;
        width: 294px;
        height: 80px;
        background-image: url(../../assets/images/btn_share.png);
    }
    .btn_bishu{
        display: inline-table;
        width: 294px;
        height: 80px;
        margin-left: 40px;
        background-image: url(../../assets/images/btn_bishu.png);
    }
}
</style>
